<template>
  <div>
    <Search v-model="search" placeholder="Terms and Conditions">
      <template #append>
        <v-icon
          @click="openDeleteAttachment"
          class="pointer mr-4"
          small
          color="#79839B"
        >
          mdi-delete
        </v-icon>
        <v-icon
          @click="toggleArrangement"
          class="pointer mr-4"
          small
          color="#79839B"
        >
          mdi-format-list-bulleted-square
        </v-icon>
        <v-icon @click="clickUploadInput" small class="pointer" color="#79839B">
          mdi-file-upload
        </v-icon>
      </template>
    </Search>
    <v-file-input
      v-show="false"
      @change="uploadFile"
      accept="image/*"
      class="upload-btn"
      hide-input
      multiple
      prepend-icon="mdi-upload"
      truncate-length="15"
      ref="fileInput"
    >
    </v-file-input>
    <v-card flat class="pa-4">
      <AttachmentGroup
        v-model="selectedAttachments"
        :arrangement="attachmentArrangement"
        :images="sortAttachments"
      ></AttachmentGroup>
    </v-card>
    <Dialog
      v-model="showDialog"
      :title="dialogTitle"
      :show-save="false"
      width="480"
    >
      <DeleteAttachment
        @delete="deleteAttachment"
        :attachments="selectedAttachments"
      ></DeleteAttachment>
    </Dialog>
  </div>
</template>
<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import Search from "@/components/Quotation/Search/Search.vue";
import AttachmentGroup from "@/components/AttachmentGroup/AttachmentGroup.vue";
import Dialog from "@/components/Maintenance/Dialog/Dialog.vue";
import DeleteAttachment from "@/components/Quotation/Dialog/Attachment/DeleteAttachment.vue";
import VFileInput from "vuetify/src/components/VFileInput";
import { readerFile } from "@/common/constants/Utils";
import { IFile } from "@/components/Project/index";
type VFileInputInstance = InstanceType<typeof VFileInput>;
@Component({
  components: {
    Search,
    AttachmentGroup,
    Dialog,
    DeleteAttachment,
  },
  props: {
    attachments: {
      type: Array,
      default: () => [],
    },
  },
})
export default class Attachment extends Vue {
  // search
  search = "";
  // dialog
  dialogTitle = "";
  showDialog = false;
  openDialog() {
    this.showDialog = true;
  }
  closeDialog() {
    this.showDialog = false;
  }

  // Attachment
  get propAttachments() {
    return this.$props.attachments;
  }

  get sortAttachments() {
    if (this.search) {
      return this.propAttachments.filter((attachment: IFile) => {
        let validate = false;
        // 搜索title
        validate = attachment.title.indexOf(this.search) >= 0;
        // 搜索subtitle
        if (attachment.subtitle) {
          validate = attachment.subtitle.indexOf(this.search) >= 0;
        }
        return validate;
      });
    }
    return this.propAttachments;
  }
  selectedAttachments = [];
  attachmentArrangement = "brief";
  toggleArrangement() {
    this.attachmentArrangement =
      this.attachmentArrangement === "detailed" ? "brief" : "detailed";
  }

  openDeleteAttachment() {
    if (this.selectedAttachments.length > 0) {
      this.openDialog();
      this.dialogTitle = "Delete";
    } else {
      this.$Swal.fire({
        position: "center",
        icon: "warning",
        title: "Please select the Attachment you want to delete",
        showConfirmButton: false,
        timer: 1500,
      });
      return;
    }
  }

  deleteAttachment() {
    this.selectedAttachments.forEach((selectedAttachment) => {
      const index = this.propAttachments.indexOf(selectedAttachment);
      this.propAttachments.splice(index, 1);
    });
    this.selectedAttachments = [];
    this.closeDialog();
  }
  // upload
  clickUploadInput() {
    (this.$refs.fileInput as VFileInputInstance).$refs.input.click();
  }

  async uploadFile(files: HTMLInputElement["files"]) {
    if (!files || files.length <= 0) return;
    for (let i = 0; i < files.length; i++) {
      const file = files[i];
      const reader: FileReader = await readerFile(file);
      if (!reader.error) {
        // 文件转base64成功
        const fileName = file.name;
        const lastIndex = fileName.lastIndexOf(".");
        const ext = fileName.substring(lastIndex + 1).toLowerCase();
        const fileObj = {
          id: `${new Date().getTime()}${file.name}`,
          src: reader.result as string,
          type: ext,
          title: fileName.substring(0, lastIndex),
          subtitle: file.name,
        };
        this.$set(this.propAttachments, this.propAttachments.length, fileObj);
      } else {
        // 文件转base64失败
        this.$Swal.fire({
          position: "center",
          icon: "warning",
          title: "Upload Fail",
          showConfirmButton: false,
          timer: 1500,
        });
      }
    }
  }
}
</script>
<style lang="scss">
@import "./Attachment.scss";
</style>
